<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 发布管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item>
            <el-input
                v-model="query.name"
                placeholder="标题"
                class="handle-input mr10"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <div class="block">
              <el-date-picker
                  v-model="query.newsTime"
                  type="date"
                  placeholder="选择一个日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  :shortcuts="shortcuts"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-select
                v-model="query.cid"
                filterable
                placeholder="选择查看的类别"
                @focus="getCate()"
            >
              <el-option
                  v-for="item in cateList"
                  :key="item.sid"
                  :label="item.name"
                  :value="item.sid"
                  :disabled="item.sid==4 ? true:false"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
            >搜索
            </el-button
            >
            <el-button
                type="primary"

                @click="handleAudtSchool"
            >审核校园风光
            </el-button
            >
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button-->
          <!--                type="primary"-->
          <!--                icon="el-icon-circle-plus-outline"-->
          <!--                @click="handleAdd"-->
          <!--            >新增-->
          <!--            </el-button-->
          <!--            >-->
          <!--          </el-form-item>-->
          <!--          <el-form-item>-->
          <!--            <el-button-->
          <!--                type="primary"-->
          <!--                icon="el-icon-circle-plus-outline"-->
          <!--                @click="handleSchoolAdd"-->
          <!--            >新增校园风光-->
          <!--            </el-button-->
          <!--            >-->
          <!--          </el-form-item>-->
        </el-form>
        <div class="paddy">
          <el-button type="primary" plain @click="checkStates()"
          >待审核
          </el-button
          >
          <el-button type="primary" plain @click="checkStatesThree()"
          >已发布
          </el-button
          >
        </div>
      </div>
      <div class="di">
        <!--        <el-container>-->
        <!--          <el-aside width="98%" class="table1">-->
        <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column
                  :show-overflow-tooltip="true"
                  :prop="item.prop"
                  :label="item.label"
                  v-for="item in props"
                  :key="item.prop"
                  align="center"
              >
              </el-table-column>
              <el-table-column label="发布" align="center">
                <template #default="scope">
                  <el-switch
                      v-model="scope.row.releaseType"
                      active-value="1"
                      inactive-value="0"
                      active-text="发布"
                      inactive-text="撤回"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      @change="changeState($event, scope.row.sid)"
                  />
                </template>
              </el-table-column>
              <el-table-column>
                <el-table-column
                    label="操作"
                    width="180"
                    align="center"
                    fixed="right"
                >
                  <template #default="scope">
                    <!--                    <el-button-->
                    <!--                        type="text"-->
                    <!--                        icon="el-icon-edit"-->
                    <!--                        @click="handleEdit(scope.row.sid)"-->
                    <!--                    >编辑-->
                    <!--                    </el-button>-->
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        class="red"
                        @click="handleDelete(scope.$index, scope.row.sid)"
                    >删除
                    </el-button
                    >
                    <el-button @click="look(scope.row.content)" type="success"
                               v-if="scope.row.content!=null ">查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-sizes="[10, 20, 40]"
                  :page-size="query.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageTotal"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
        <!--          </el-aside>-->
        <!--          <el-main>-->
        <!--            <div class="clits">-->
        <!--              <div><i class="el-icon-s-data"></i>校园风光</div>-->
        <!--            </div>-->
        <!--            <el-table-->
        <!--                :data="tableDataCidFour"-->
        <!--                border-->
        <!--                class="table"-->
        <!--                ref="multipleTable"-->
        <!--                header-cell-class-name="table-header"-->
        <!--            >-->
        <!--            <el-table-column-->
        <!--                :show-overflow-tooltip="true"-->
        <!--                :prop="item.prop"-->
        <!--                :label="item.label"-->
        <!--                v-for="item in props"-->
        <!--                :key="item.prop"-->
        <!--            >-->
        <!--            </el-table-column >-->
        <!--              <el-table-column label="地点" prop="title" align="center"></el-table-column>-->
        <!--              <el-table-column label="作者" prop="author" align="center"></el-table-column>-->
        <!--              <el-table-column label="发布时间" prop="newsTime" align="center"></el-table-column>-->
        <!--              <el-table-column label="风光样例" align="center">-->
        <!--                <template #default="scope">-->
        <!--                  <p v-if="scope.row.content!=null">-->
        <!--                       <span v-for="(item,index) in scope.row.content.split(',')" :key="index">-->
        <!--                     <el-image style="display: inline-flex;padding: 10px;width: 30%;height: 10%"-->
        <!--                               class="table-td-thumb"-->
        <!--                               :src="item"-->
        <!--                               :preview-src-list="[item]"-->
        <!--                     ></el-image>-->
        <!--        </span>-->
        <!--                  </p>-->

        <!--                </template>-->
        <!--              </el-table-column>-->
        <!--              <el-table-column label="发布" align="center">-->
        <!--                <template #default="scope">-->
        <!--                  <el-switch-->
        <!--                      v-model="scope.row.releaseType"-->
        <!--                      active-value="1"-->
        <!--                      inactive-value="0"-->
        <!--                      active-text="发布"-->
        <!--                      inactive-text="撤回"-->
        <!--                      active-color="#13ce66"-->
        <!--                      inactive-color="#ff4949"-->
        <!--                      @change="changeState($event, scope.row.sid)"-->
        <!--                  />-->
        <!--                </template>-->
        <!--              </el-table-column>-->
        <!--              <el-table-column>-->
        <!--                <el-table-column-->
        <!--                    label="操作"-->
        <!--                    width="180"-->
        <!--                    align="center"-->
        <!--                    fixed="right"-->
        <!--                >-->
        <!--                  <template #default="scope">-->
        <!--                  <el-button-->
        <!--                      type="text"-->
        <!--                      icon="el-icon-edit"-->
        <!--                      @click="handleEditSchool(scope.row.sid)"-->
        <!--                  >编辑-->
        <!--                  </el-button>-->
        <!--                    <el-button-->
        <!--                        type="text"-->
        <!--                        icon="el-icon-delete"-->
        <!--                        class="red"-->
        <!--                        @click="handleDelete(scope.$index, scope.row.sid)"-->
        <!--                    >删除-->
        <!--                    </el-button-->
        <!--                    >-->
        <!--                  </template>-->
        <!--                </el-table-column>-->
        <!--              </el-table-column>-->
        <!--            </el-table>-->
        <!--          </el-main>-->
        <!--        </el-container>-->
      </div>
    </div>
    <div>

    </div>
    <!--    <div>-->
    <!--      &lt;!&ndash; 校园分风光 &ndash;&gt;-->
    <!--      <el-dialog-->
    <!--          title="校园风光"-->
    <!--          v-model="importVisible"-->
    <!--          width="40%"-->
    <!--          :before-close="handleClose">-->

    <!--        <div class="container">-->
    <!--          <div class="form-box">-->
    <!--            <el-form ref="formRef" :rules="rules" :model="fileForm" label-width="80px">-->
    <!--              <el-form-item label="类型" prop="goodsName">-->
    <!--                <el-input v-model="fileForm.typeName" aria-required="true" disabled style="color: #2d8cf0"></el-input>-->
    <!--              </el-form-item>-->
    <!--              &lt;!&ndash;             :file-list="fileList"&ndash;&gt;-->
    <!--              <el-form-item label="校园图片">-->
    <!--                <el-upload ref="pictureUpload" action="#" list-type="picture-card"-->
    <!--                           :limit="10" :on-exceed="handleExceed"-->
    <!--                           :auto-upload="false"-->
    <!--                           :file-list="fileList"-->

    <!--                           :on-change="handleFile">-->
    <!--                  <template #default>-->
    <!--                    <i class="el-icon-plus"></i>-->

    <!--                  </template>-->
    <!--                  <template #file="{ file }">-->
    <!--                    <div>-->
    <!--                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>-->
    <!--                      <span class="el-upload-list__item-actions">-->
    <!--          <span-->
    <!--              v-if="!disabled"-->
    <!--              class="el-upload-list__item-delete"-->
    <!--              @click="handleRemove(file)"-->
    <!--          >-->
    <!--            <i class="el-icon-delete"></i>-->
    <!--          </span>-->
    <!--        </span>-->
    <!--                    </div>-->
    <!--                  </template>-->
    <!--                </el-upload>-->

    <!--              </el-form-item>-->
    <!--              <el-form-item label="标题名" prop="title">-->
    <!--                <el-input v-model="fileForm.title" placeholder="标题名" aria-required="true">></el-input>-->
    <!--              </el-form-item>-->
    <!--              <el-form-item>-->
    <!--                <el-button type="primary" @click="onSubmit">提交</el-button>-->
    <!--                &lt;!&ndash;            <el-button @click="onReset">重置</el-button>&ndash;&gt;-->
    <!--              </el-form-item>-->
    <!--            </el-form>-->

    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-dialog>-->
    <!--    </div>-->
    <div>
      <el-dialog title="内容" v-model="vis" width="50%">
        <el-card>
          <div v-html="content"></div>
        </el-card>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
// import { fetchData } from "../../api/index";
import request from "../../utils/request";

export default {
  name: "Article",
  // methods: {
  //   //文件上传
  //   submitUpload() {
  //     this.$refs.upload.submit();
  //   },
  //   //文件数量控制
  //   handleExceed(files, fileList) {
  //     console.log(fileList)
  //     this.$message.warning(
  //         `The limit is 1, you selected ${
  //             files.length
  //         } files this time, add up to ${files.length + fileList.length} totally`
  //     );
  //   },
  //   //文件移除
  //   handleRemove(file) {
  //     let uploadFiles = this.$refs.pictureUpload.uploadFiles
  //     for (var i = 0; i < uploadFiles.length; i++) {
  //       if (uploadFiles[i]['url'] == file.url) {
  //         uploadFiles.splice(i, 1)
  //         this.fileList.splice(i, 1)
  //         console.log(this.fileList)
  //       }
  //     }
  //   },
  // },
  setup() {
    const router = useRouter();
    const props = [
      {label: "标题", prop: "title"},
      // {label: "作者", prop: "author"},
      {label: "分类", prop: "name"},
      {label: "点击量", prop: "hits"},
      {label: "发布时间", prop: "newsTime"},
    ];

    const query = reactive({
      name: "",
      cid: "",
      newsTime: "",
      releaseType: "",
      pageNum: 1,
      pageSize: 10,
    });
    //下拉框
    // const options = ref([]);
    const cateList = ref([]);
    const getCate = () => {
      request.get("/cate").then((res) => {
        cateList.value = res.data;
      });
    };
    getCate()
    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据

    const getData = () => {
      request
          .get("/article/page", {
            params: query,
          })
          .then((res) => {
            tableData.value = res.data.records;
            pageTotal.value = res.data.total;
          });
    };
    getData();

    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete("/article/" + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
              } else {
                ElMessage.error("删除失败");
              }
            });
            getData();
            // getListSchool();
          })
          .catch(() => {
          });
    };

    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addArticle");
    };
    const handleAudtSchool = () => {
      router.push("/admin/auditScenery");
    };
    let form = reactive({
      name: "",
      address: "",
    });
    const handleEdit = (sid) => {
      router.push({path: "/admin/addArticle", query: {id: sid}});
    };

    const changeState = (val, id) => {
      var article = {
        sid: id,
        releaseType: val,
      };
      request.post("/article/updateStateType", article).then((res) => {
        if (res.code != null) {
          ElMessage.error(res.msg);
        } else {
          if (val === "1") {
            ElMessage.success("发布成功");
          } else {
            ElMessage.success("撤回成功");
          }
          getData();
          // getListSchool();
        }
      });
    };
    const propsState = [
      {label: "标题", prop: "title"},
      {label: "作者", prop: "author"},
      {label: "分类", prop: "name"},
    ];
    const query1 = reactive({
      pageNum: 1,
      pageSize: 10,
    });

    // const tableDataState = ref([]);
    // const pageTotal1 = ref(0);
    // const getStateData = () => {
    //   request
    //       .get("/article/queryByMyArticle", {
    //         params: query1,
    //       })
    //       .then((res) => {
    //         if (res.code == 18) {
    //           ElMessage.warning(res.msg);
    //           tableDataState.value = [];
    //         } else {
    //           tableDataState.value = res.data.records;
    //           pageTotal1.value = res.data.total;
    //         }
    //       });
    // };
    //getStateData();
    // 分页大小
    // const handleSizeChange1 = (val) => {
    //   query1.pageSize = val;
    //   getStateData();
    // };
    // 分页导航
    // const handlePageChange1 = (val) => {
    //   query1.pageNum = val;
    //   getStateData();
    // };

    const rules = {
      title: [
        {required: true, message: "请输入物品名", trigger: "blur"},
      ],
    };
    const content = ref("")
    const vis = ref(false)
    let editor

    const look = (c) => {

      content.value = c

      vis.value = true
    };
    const checkStates = () => {
      query.releaseType = "0"
      getData()
    };
    const checkStatesThree = () => {
      query.releaseType = "1"
      getData()
    };
    const tableDataCidFour = ref([])
    const getListSchool = () => {
      request.get("/article/queryListSchool").then((res) => {
        tableDataCidFour.value = res.data
      })
    };
    // getListSchool()
    return {
      rules,
      props,
      query,
      tableData,
      pageTotal,
      form, cateList, tableDataCidFour, handleAudtSchool,
      // tableDataState,
      // pageTotal1,
      propsState,
      // importVisible,
      // disabled,
      // fileForm,
      // formRef,
      content,
      vis,
      look,
      // onSubmit,
      getCate,

      // handleSchoolAdd,
      // getStateData,
      checkStates, checkStatesThree,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      changeState,
      handleEdit,
      // handleSizeChange1,
      // handlePageChange1,
      // handleFile,
    };
  },
};
</script>

<style scoped>
.clits {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.clits div {
  text-align: left;
  color: white;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
